<div class="row-fluid" style=" background-color: #F5F5F5;
    border: medium solid #C4C4C4;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 8px #999999;
    height: 100%;
    margin: 130px auto 0;
    width: 900px;
    top: 20px;"
    >
               <div class="span12">
                  <div class="portlet box blue" id="form_wizard_1">
                     <div class="portlet-title">
                        <h4>
                           <i class="icon-reorder"></i> ReSoPro.Net <span class="step-title">Etape 1 sur 4</span>
                        </h4>
                        <div class="tools hidden-phone">
                           <a href="javascript:;" class="collapse"></a>
                           <a href="#portlet-config" data-toggle="modal" class="config"></a>
                           <a href="javascript:;" class="reload"></a>
                           <a href="javascript:;" class="remove"></a>
                        </div>
                     </div>
                     <div class="portlet-body form">
                        
                     <form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">
                           <div class="form-wizard"  style="background-color: #F7F7F7 ">
                              <div class="navbar steps">
                                 <div class="navbar-inner">
                                    <ul class="row-fluid">
                                       <li class="span3">
                                          <a href="#tab1" data-toggle="tab" class="step active">
                                          <span class="number">1</span>
                                          <span class="desc"><i class="icon-ok"></i> Paramétres de compte:</span>   
                                          </a>
                                       </li>
                                       <li class="span3">
                                          <a href="#tab2" data-toggle="tab" class="step">
                                          <span class="number">2</span>
                                          <span class="desc"><i class="icon-ok"></i> Paramétres de profile:</span>   
                                          </a>
                                       </li>
                                       <li class="span3">
                                          <a href="#tab3" data-toggle="tab" class="step">
                                          <span class="number">3</span>
                                          <span class="desc"><i class="icon-ok"></i> Plus d'informations:</span>   
                                          </a>
                                       </li>
                                       <li class="span3">
                                          <a href="#tab4" data-toggle="tab" class="step">
                                          <span class="number">4</span>
                                          <span class="desc" style=" left: -49px;
    position: relative;
    top: 23px;"><i class="icon-ok" ></i> Confirmation:</span>   
                                          </a> 
                                       </li>
                                    </ul>
                                 </div>
                              </div>
                              <div id="bar" class="progress progress-success progress-striped">
                                 <div class="bar"></div>
                              </div>
                                   <div class="tab-content" style="background-color: #FFFFFF">
                                 <div class="tab-pane active" id="tab1">
                                    <h3 class="block">Fournir des détails de votre compte:</h3>
                                    <div class="control-group">
                                       <label class="control-label">Identifiant:</label>
                                         <div class="controls" >
                                          {{ form_widget(form.username,{'attr':{'class':'controls'}})}}

                                             </div>
                                        
                                       </div>
                                 
                                    <div class="control-group">
                                       
                                       <div class="controls">
                                          <label class="control-label">Mot de passe:</label>{{ form_widget(form.plainPassword.first,{'attr':{'class':'control-label'}})}}
                                         
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       
                                       <div class="controls">
                                          <label class="control-label">Confirmation mot de passe:</label>{{ form_widget(form.plainPassword.second,{'attr':{'class':'control-label'}})}}
                                          
                                       </div>
                                    </div>
                                    <div class="control-group">
                                             <label class="control-label">Type:</label>{{ form_widget(form.type) }}
                                             <div class="controls" >

                                                 <span class="help-inline"></a>
                                                 </span>
                                             </div>
                                         </div>
                                 </div>
                                 <div class="tab-pane" id="tab2">
                                    <h3 class="block" style="color: #9999B2;">Fournir des détails sur votre profil</h3>
                                         <div class="control-group">
                                             <label class="control-label">Nom:</label>
                                             <div class="controls">
                                        {{ form_widget(form.nom)}}  

                                                 </div>
                                             </div>
                                             <div class="control-group">
                                                 <label class="control-label">Prénom:</label>
                                                 <div class="controls">
                                        {{ form_widget(form.prenom)}}  

                                                     </div>
                                                 </div>


                                                 <div class="control-group">
                                                     <label class="control-label">Date de naissance:</label>
                                                     <div class="controls">
                                                         <div class="input-append date date-picker" data-date="31-03-2013" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
                                                         {{ form_widget(form.date)}} 
                                                                 <span class="add-on"><i class="icon-calendar"></i></span>
                                                             </div>
                                                         </div>
                                                     </div>

                                         <div class="control-group" >
                                                         <label class="control-label">Email:</label>
                                                           {{ form_widget(form.email)}} 
                                                     </div>
                                                     <div class="control-group">
                                                         <label class="control-label">Téléphone:</label>
                                                 {{ form_widget(form.telephone)}} 
                                                     </div>
                                                     <div class="control-group">
                                                         <label class="control-label">Sex:</label>
                                                 {{ form_widget(form.sex)}} 
                                                     </div>
                                                     <div class="control-group">
                                                         <label class="control-label">Adresse:</label>{{ form_widget(form.adresse,{'attr':{'class':'controls'}})}} 

                                                     </div>
                                                     <div class="control-group">
                                                         <label class="control-label">Pays:</label>
                                                         <div class="controls">
                                                  {{ form_widget(form.pays)}}    

                                                             </div>
                                                         </div>
                                                         <div class="control-group">
                                                             <label class="control-label">ville:</label>
                                                             <div class="controls">
                                                                 <select id="fos_user_registration_form_ville" required="required" name="fos_user_registration_form[ville]">
                                                                 </select>   

                                                             </div>
                                                         </div>

                                                         <div class="control-group">
                                                             <label class="control-label">Remarques:</label>
                                                             <div class="controls">
                                                     {{ form_widget(form.remarques)}}  
                                                                 </div>
                                                             </div>
                                                         </div>
                                 <div class="tab-pane" id="tab3">
                                    <h3 class="block" style="color: #9999B2;">Education et compétences</h3>
                                                             <div class="control-group">
                                                                 <table id="list_ecole">
                                                                     <thead>
                                                                 
                                                                 <tr>
                                                                 <h4 class="block" style="color: #0088CC" /> Votre école(s):</h4>    
                                                         
                                                                 <a href="javascript:addEcoleUser()"> <img src="/images/plus.png" style="position:relative;left: 119px;top:-42px;" /></a></tr>
                                                                 </thead>
                                                                     <tbody>
                                                                     </tbody>
                                                                 </table>
                                                             </div>
                                                             <div class="control-group">
                                                                 <table id="list_universite">
                                                                     <thead>
                                                                         <tr><h4 class="block" style="color: #0088CC">Votre université(s):</h4> <a href="javascript:addUniversiteUser()"><img src="/images/plus.png" style="position:relative;left: 155px;top:-43px;" /></a></td></tr>
                                                                     </thead>
                                                                     <tbody>
                                                                     </tbody>
                                                                 </table>
                                                             </div>
                                 </div>
                                 <div class="tab-pane" id="tab4">
                                    <h3 class="block" style="color: #9999B2;">Confirmation</h3>
                                                             <div class="control-group">
                                                                 <label class="control-label">Nom</label>
                                                                 <div class="controls">
                                                                     <span class="text"> </span>
                                                                 </div>
                                                             </div>
                                     <div class="control-group">
                                                                 <label class="control-label">Prénom</label>
                                                                 <div class="controls">
                                                                     <span class="text"> </span>
                                                                 </div>
                                                             </div>
                                                             <div class="control-group">
                                                                 <label class="control-label">Email:</label>
                                                                 <div class="controls">
                                                                     <span class="text"> </span>
                                                                 </div>
                                                             </div>
                                                             <div class="control-group">
                                                                 <label class="control-label">Telephone:</label>
                                                                 <div class="controls">
                                                                     <span class="text"></span>
                                                                 </div>
                                                             </div>
                                                             <div class="control-group">
                                                                 <label class="control-label">Captcha:</label>
                                             {{ form_widget(form.captcha)}} 
                                                             </div>
                                    <div class="control-group">
                                       <label class="control-label"></label>
                                       <div class="controls">
                                          <label class="checkbox">
                                          <input type="checkbox" value="" /> Je confirm
                                          </label>
                                       </div>
                                    </div>
                                    <input type="submit" value="{{ 'Valider'|trans({}, 'FOSUserBundle') }}"  style="position: relative;left: 270px;"/>
                                 </div>
                              </div>
                              <div class="form-actions clearfix">
                                 <a href="javascript:;" class="btn button-previous">
                                 <i class="m-icon-swapleft"></i> Retour 
                                 </a>
                                 <a href="javascript:;" class="btn blue button-next">
                                 Continuer <i class="m-icon-swapright m-icon-white"></i>
                                 </a>
                                 
                              </div>
                           </div>
                             {{ form_widget(form._token)}} 
                        </form>
                     </div>
                  </div>
               </div>
            </div>
            <!-- END PAGE CONTENT-->  
            <script>
                                  
                                 
                                 var index=0
                                 var cpt=0
                                 addEcoleUser()
                                 getVilleParPays($('#fos_user_registration_form_pays').val())
                                 $('#fos_user_registration_form_pays').change(function(){
                                 getVilleParPays($(this).val())
                                 
                             })
                                 function getVilleParPays(id_pays){
                                     $.ajax({
                                    url: "{{path('ajax_get_ville_par_pays')}}",
                                    data: 'id_pays='+id_pays,
                                    success: function(data){
                                    $('#fos_user_registration_form_ville').html(data)
                                }
           
                                 })
                                 }
                                 function addEcoleUser(){
                                 $('#list_ecole tbody').append('<tr>'+
                                     '<td><h4>Ecole'+(index+1)+'</h4></td>'+
                                     '<td><input type="text" id="fos_user_registration_form_usersecoles'+index+'ecole" name="fos_user_registration_form[usersecoles]['+index+'][ecole]" /></td>'+
                                    
                                    '</tr>'+
                                     '<tr>'+
                                     '<td><h5>Date Debut :</h5></td><td><input type="text" id="fos_user_registration_form_usersecoles'+index+'date_debut" name="fos_user_registration_form[usersecoles]['+index+'][date_debut] "/></td>'+
                                     '<td><h5>Date Fin :</h5></td><td><input type="text" id="fos_user_registration_form_usersecoles'+index+'date_fin" name="fos_user_registration_form[usersecoles]['+index+'][date_fin]"/></td>'+
                                     
                                     '</tr>')
                                 $('#fos_user_registration_form_usersecoles'+index+'ecole').width ("100px");
                                
                                 index++
                                 }
                                 
                                
    
                                 
                             
                             function addUniversiteUser(){
                                 $('#list_universite tbody').append('<tr>'+
                                     '<td><h4>Universite '+(cpt+1)+'</h4></td>'+
                                     '<td><input type="text" id="fos_user_registration_form_usersuniversites'+cpt+'universite" name="fos_user_registration_form[usersuniversites]['+cpt+'][universite]"/></td>'+
                                     '</tr>'+
                                     '<tr>'+
                                     '<td><h5>Date Debut :</h5></td><td><input type="text" id="fos_user_registration_form_usersuniversites'+cpt+'date_debut" name="fos_user_registration_form[usersuniversites]['+cpt+'][date_debut]"/></td>'+
                                     '<td><h5>Date Fin :</h5></td><td><input type="text" id="fos_user_registration_form_usersuniversites'+cpt+'date_fin" name="fos_user_registration_form[usersuniversites]['+cpt+'][date_fin]"/></td>'+
                                     
                                     '</tr>')
                                 $('#fos_user_registration_form_usersuniversites'+cpt+'universite').width ("100px");
                                
                                 $('#fos_user_registration_form_usersuniversites'+cpt+'universite').autocomplete({
        source: "{{ path('rsp_user_get_ecole') }}",
        select : function(event, ui){
           if(ui.item){
               var i = $(this).attr('id');
               i = i.split('_');
               i=i[1];
               $('#id_'+i).val(ui.item.id);
               $('#td_nom'+i).val(ui.item.nom);
              
               }
           }
    });
                             
     cpt++
                                 
                             }
                             
                                 </script>
                             